<template>
  <div class="app-container">
    <el-card>
      <!-- 搜索表单 -->
      <el-form ref="queryForm" :inline="true">
        <el-form-item>
          <el-button
            v-if="dataList.length < 1"
            icon="el-icon-plus"
            type="primary"
            @click="addParentMember"
          >新增父级
          </el-button>
          <el-button
            v-if="dataList.length > 0"
            icon="el-icon-plus"
            type="primary"
            @click="submitComputeSubsidy"
          >计算补贴
          </el-button>
          <el-button
            icon="el-icon-refresh"
            @click="handleReset"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="dataList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="name"
        default-expand-all
        size="mini"
      >
        <el-table-column label="#" width="60" />
        <el-table-column label="代理名称">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column label="上级代理">
          <template slot-scope="scope">
            {{ scope.row.parentName }}
          </template>
        </el-table-column>
        <el-table-column label="团队充值货款">
          <template slot-scope="scope">
            {{ scope.row.allRecharge }}
          </template>
        </el-table-column>
        <el-table-column label="充值货款" width="280">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.recharge"
              :precision="2"
              :min="0"
              :step="1"
              @change="handlerRecharge(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="月度补贴">
          <template slot-scope="scope">
            {{ scope.row.money }}
          </template>
        </el-table-column>
        <el-table-column label="实际到账月度补贴">
          <template slot-scope="scope">
            {{ scope.row.arrivalAmount }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!--            <el-button-->
            <!--              v-if="scope.row.parentName"-->
            <!--              size="mini"-->
            <!--              type="primary"-->
            <!--              icon="el-icon-edit"-->
            <!--              @click="addMember(scope.row)"-->
            <!--            >新增同级-->
            <!--            </el-button>-->
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="addSubMember(scope.row)"
            >新增下级
            </el-button>
            <el-button
              v-if="!scope.row.children || scope.row.children.length < 1"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteMember(scope.row.name)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { computeSubsidy } from '@/api/sms/distribution'

export default {
  name: 'Lab',
  data() {
    return {
      loading: false,
      dataList: []
    }
  },
  methods: {
    handlerRecharge(val) {
      val.allRecharge = val.recharge
    },
    submitComputeSubsidy() {
      console.log('模拟数据', this.dataList)
      const data = this.resetComputeSubsidytData(this.dataList)
      computeSubsidy({
        list: data
      }).then(res => {
        this.dataList = res.data
      })
    },
    resetComputeSubsidytData(val) {
      for (let i = 0; i < val.length; i++) {
        val[i].allRecharge = val[i].recharge
        val[i].money = 0
        val[i].arrivalAmount = 0
        if (val[i].children && val[i].children.length > 0) {
          val[i].children = this.resetComputeSubsidytData(val[i].children)
        } else {
          val[i].children = []
        }
      }
      return val
    },
    addParentMember() {
      this.dataList.push({
        name: '',
        parentName: '',
        recharge: 0,
        allRecharge: 0,
        money: 0,
        arrivalAmount: 0,
        children: []
      })
    },
    addSubMember(val) {
      console.log('新增下级', val)
      if (val.name !== '') {
        val.children.push({
          name: '',
          parentName: val.name,
          recharge: 0,
          allRecharge: 0,
          money: 0,
          arrivalAmount: 0,
          children: []
        })
      } else {
        this.$message({
          message: '请输入代理名称',
          type: 'error'
        })
      }
    },
    deleteNode(data, val) {
      for (let i = 0; i < data.length; i++) {
        if (data[i] && data[i].name === val) {
          data.splice(i, 1)
        }
        if (data[i] && data[i].children.length > 0) {
          this.deleteNode(data[i].children, val)
        }
      }
    },
    deleteMember(val) {
      console.log(val)
      if (val !== '') {
        this.deleteNode(this.dataList, val)
      } else {
        this.$message({
          message: '请输入代理名称',
          type: 'error'
        })
      }
    },
    handleReset() {
      this.dataList = []
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}
</style>
